<template>
<client-only>
  <div class="cart py-container">
    <!--主内容-->
    <div class="checkout py-container pay">
      <div class="checkout-tit">
        <h4 class="fl tit-txt">
          <span class="success-icon"></span
          ><span class="success-info"
            >订单提交成功，请您及时付款！订单号：{{ orderNo }}</span
          >
        </h4>
        <span class="fr"
          ><em class="sui-lead">应付金额：</em
          ><em class="orange money">￥{{ totalFee }}</em></span
        >
        <div class="clearfix"></div>
      </div>
      <div class="checkout-steps">
        <div class="fl weixin">微信支付</div>
        <div class="fl sao">
          <p class="red">请使用微信扫一扫。</p>
          <div class="fl code">
            <img
              src="../../assets/img/pay.jpg"
              width="100%"
              style="margin-top: 15px; margin-bottom: 15px"
            />
          </div>
        </div>
        <el-button @click="queryPayStatus" style="float: right"
          >已支付</el-button
        >
        <el-button @click="returnOrder" style="float: right; margin-right: 10px"
          >返回订单</el-button
        >
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</client-only>
</template>
<script>
import { getPayStatus } from "@/api/order";

export default {
  data() {
    return {
      orderNo: "",
      totalFee: "",
    };
  },
  created() {
    this.orderNo = this.$route.params.orderNo;
    this.totalFee = this.$route.query.totalFee;
    this.courseId = this.$route.query.courseId;
  },
  methods: {
    //根据订单号，查询支付的状态
    queryPayStatus() {
      getPayStatus(this.orderNo).then((resp) => {
        //提示
        this.$message({
          type: "success",
          message: resp.data.msg,
        });
        //跳转到课程详细页面观看视频
        this.$router.push({ path: "/course/" + this.courseId });
      });
    },
    returnOrder() {
      this.$router.back();
    },
  },
};
</script>
